import React, { Suspense, useEffect, useMemo, useRef, useState } from 'react'
import { Canvas, useFrame, useLoader, useThree } from '@react-three/fiber'
import { Environment, OrbitControls } from '@react-three/drei'

import { PostEffect } from '@/utils/PostEffect';
import { LoadObjModel } from '@/utils/LoadObjModel'
import {Stone, Points, EdgesBox, NodesTest} from './practice'

const R3F1 = () => {
  return (
    <div className='full center'>
      <Canvas >
        <ambientLight intensity={0.7} />
        <directionalLight position={[2, 2, 5]} intensity={1} />
        <OrbitControls makeDefault />
        <Environment preset='sunset' background />

        <EdgesBox onClick={(e) => {console.log('click', e)}} />

{/*         <PostEffect isGlitch={false} isFXAA isGray >
          <Stone />
          <Points />
        </PostEffect> */}

      </Canvas>
    </div>
  );
};


export default R3F1;
// export default ShineText;
